<template>
  <div class="content">
    <div class="con">
      <div class="tab_bar">
        <div v-for="(item, index) in thatEditRow.infomation.tabList" :class="{ is_active: item.active }" :key="index" class="tabs"
          @click="tabClick(item, index)">
          {{ item.label }}
        </div>
      </div>
      <div class="search_bar">
        <el-date-picker class="time" v-model="timeValue" @change="changeTime" type="daterange" start-placeholder="开始日期"
          end-placeholder="结束日期" :clearable="false">
        </el-date-picker>
        <div class="search_select">
          <el-button size="mini" type="primary">
            出现天数
          </el-button>
          <el-input placeholder="最小天数"  v-model.number="searchData.minDay" style="margin-right: 10px;"></el-input>
          <el-input placeholder="最大天数"  v-model.number="searchData.maxDay"></el-input>
        </div>
        <div class="search_select">
          <el-button size="mini" type="primary">
            排序
          </el-button>
          <el-select size="mini" v-model="searchData.order" @change="changeSort()" placeholder="请选择">
            <el-option v-for="(item, index) in sortList" :key="index" :label="item.label" :value="item.sort">
            </el-option>
          </el-select>
        </div>
        <div class="search_btn">
          <el-button size="mini" @click="searchCardList">搜索</el-button>
          <!-- <el-button size="mini" :disabled="true">导出</el-button> -->
        </div>
      </div>
      <div class="cards">
        <el-card class="box-card" v-for="(item, index) in thatEditRow.infomation.cardList" :key="index">
          <div class="box-card_border">
            <i class="el-icon-circle-plus-outline" @click="addTabsClick(item)"></i>
            <div class="box-card_top">
              <div class="card_left">
                <el-image :src="'/httpImage/' + item.personPicUrl" fit="cover">
                </el-image>
                <p>{{ item.labels }}</p>
              </div>
              <div class="card_right">
                <div class="particulars"><img src="@/assets/images/particulars.jpg" alt=""> 详情</div>
                <h3>{{ item.daysAppeared || "--" }}天</h3>
                <!-- <h3>{{ item }} %</h3> -->
                <h4>档案编号: {{ item.id || "--" }} </h4>
                <p>住址: {{ item.community || "--" }}</p>
                <p>出现地点: {{ item.lastLocation || "--" }}</p>
                <p>出现时间: {{ item.lastAppearanceTime || "--" }}</p>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- <div class="btn-pager">
      <PagerView class="page" layout="sizes, prev, pager, next" :pager-options="productPagerOptions"
        :pageSizes="productPagerOptions.pageSizeOption" @current-change="currentProductHandler"
        @size-change="productChangeHandler" />
    </div> -->
  </div>
</template>

<script>
import {
  statistics,
  addConfig,
} from "@/api/residentManage/residentManage"
export default {
  name: "residentLabel",
  props: {
    editRow: {
      type: Object,
      default: () => {
        return {
          infomation: {
            tabList: [],
            cardList:[]
          },
        }
      }
    }
  },
  components: {
  },
  data() {
    return {
      thatEditRow:this.editRow,
      sortList: [
        {
          label: "按时间正序",
          sort: true
        },
        {
          label: "按时间倒序",
          sort: false
        }
      ],
      timeValue: [
        this.$moment(new Date()).subtract(1, "months").format("YYYY-MM-DD HH:mm:ss"),
        this.$moment().format("YYYY-MM-DD HH:mm:ss")
      ],
      // 搜素条件
      searchData: {
        startDate: "",
        endDate: "",
        order: true,
        minDay: 1,
        maxDay: 10,
      },
      value: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      editConfig: {
        visible: false,
        personIndex: 0,
        currentId: "",
        isLookImg: false,
        tabs: [],
      },
      // tabList: [],
      productPagerOptions: {
        currPage: 1,
        pageSize: 10,
        totalCount: 0,
      },
      startDate: null,
      endDate: null,
      searchParams:{}
      // cardList: []
    };
  },
  computed: {

  },
  created() {
    this.statistics({
      list: []
    })
    this.getDateInit()
    this.addConfig({

    })
  },
  mounted() {

  },
  watch: {
    searchData: {  
      handler(newVal,) {  
        console.log('searchData:', newVal);  
        if(newVal.minDay<1){
          newVal.minDay=1
        }
        if(newVal.maxDay<1){
          newVal.minDay=1
        }
        this.searchParams={
          ...newVal,
          startDate: this.timeValue[0],
          endDate: this.timeValue[1],
        }
      },  
      deep: true // 开启深度监听  
    } 
  },
  methods: {
    changeTime() {
      console.log(this.timeValue, "看看时间")
    },
    addTabsClick() {
      this.editConfig.visible = true
    },
    // 点击标签
    tabClick(item) {
      // 样式重置
      this.thatEditRow.infomation.tabList = this.thatEditRow.infomation.tabList.map(tab => {
        if (tab.label === item.label) {
          tab.active = true;
        } else {
          tab.active = false;
        }
        return tab;
      });
      
      this.$emit("tabClick",item.personalStatus,this.searchParams)
    },
    statistics(params) {
      statistics(params).then((res) => {
        let arr = []
        res.data.map((item) => {
          if (item.personalStatus === "stranger") {
            item.personalStatus = "陌生人"
          } else if (item.personalStatus === "visitor") {
            item.personalStatus = "访客"
          } else if (item.personalStatus === "resident") {
            item.personalStatus = "住户"
          } else if (item.personalStatus === "permanent_resident") {
            item.personalStatus = "常住人口"
          }
          let xAxisDays = []
          res.data[0].list.forEach((i) => {
            xAxisDays.push(i.dayDate)
          })
          arr.push(item.personalStatus)
        })
      })
    },
    // 时间戳转换
    timestampToDateTime(timestamp) {
      let date = new Date(timestamp * 1000); //毫秒时间戳  
      let year = date.getFullYear();
      let month = (date.getMonth() + 1).toString().padStart(2, '0');
      let day = date.getDate().toString().padStart(2, '0');
      let hours = date.getHours().toString().padStart(2, '0');
      let minutes = date.getMinutes().toString().padStart(2, '0');
      // let seconds = date.getSeconds().toString().padStart(2, '0');   
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    getDateInit() {
      // 要求 默认一个月
      const end = new Date()
      const start = new Date()
      const nowDate = new Date()
      nowDate.setHours(0)
      nowDate.setMinutes(0)
      nowDate.setSeconds(0)
      nowDate.setMilliseconds(0)
      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30)
      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1)
      return [this.$moment(start).format("YYYY-MM-DD HH:mm:ss"), this.$moment(end).format("YYYY-MM-DD HH:mm:ss")]
    },
    format(array) {
      if (array.length === 0) {
        return []
      }
      return [
        this.$moment(array[0]).format("YYYY-MM-DD HH:mm:ss"),
        this.$moment(array[1]).format("YYYY-MM-DD HH:mm:ss")
      ]
    },
    // 添加标签
    addConfig(params) {
      addConfig(params).then((res) => {
        console.log(res, "添加标签")
      })
    },
    // 搜索
    searchCardList() {
      this.searchParams={
        ...this.searchData,
        minDay: this.searchData.minDay,
        maxDay: this.searchData.maxDay,
        startDate: this.timeValue[0],
        endDate: this.timeValue[1],
      }
      this.$emit("searchCardList",this.searchParams)
    },
    // 排序
    changeSort() {
      this.$emit("searchCardList",this.searchParams)
    }
  },
};
</script>

<style scoped lang="scss">
.content {
  margin-right: 20px;

  .echarts_box {
    display: flex;
    margin-top: 30px;
    justify-content: space-between;
  }

  .tab_bar {
    margin-top: 30px;
    background: #00000A;
    box-sizing: border-box;
    border-bottom: 2px solid #0E9CFF;
    display: flex;

    .tabs {
      width: 153px;
      height: 43px;
      background-image: url("@/assets/images/residenManage/tabs.png");
      background-size: cover;
      /* 使背景图像完全覆盖元素 */
      background-position: center;
      /* 将图像居中放置 */
      text-align: center;
      line-height: 43px;
      margin-right: 15px;
      font-size: 16px;
      cursor: pointer;
    }

    .is_active {
      background-image: url("@/assets/images/residenManage/tabs1.png");
    }

    .no_active {
      background-image: url("@/assets/images/residenManage/tabs.png");
    }
  }

  .search_bar {
    margin: 20px 0px;
    display: flex;
    align-items: center;
    height: calc(100% - 50px);

    .el-select {
      // margin-left: 10px;
    }

    .search_select {
      margin-left: 10px;

      .el-input {
        width: 100px;
      }

      .el-button {
        // border-radius:0px;
        border-radius: 6px 0 0 6px;
      }

      .el-input__inner {
        height: 25px !important;
        border-radius: 0px !important;
      }

      .el-select {
        border-radius: 0px;

        .el-input {
          border-radius: 0px;
        }
      }
    }

    .search_btn {
      .el-button {
        width: 100px;
        // height: 40px;
        margin-left: 10px;
        border-radius: 50px;
        opacity: 1;
        background: rgba(10, 26, 52, 0.6);
        border: 1px solid rgba(89, 175, 249, 0.7049);
        box-shadow: inset 0px 0px 5px 0.5px rgba(3, 251, 255, 0.6513);
        color: rgba(255, 255, 255, 0.9)
      }

      .el-button:hover {
        color: #01C2FF;
      }
    }
  }

  .cards {
    width: 100%;
    height: 412px;
    overflow-y: auto;
    // height: calc(100% - 500px);
    margin-top: 20px;
    display: flex !important;
    flex-wrap: wrap;

    .box-card {
      .box-card_border {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        position: relative;

        .el-icon-circle-plus-outline {
          position: absolute;
          bottom: 10px;
          right: 10px;
          font-size: 24px;
          z-index: 80;
        }

        .box-card_top {
          width: 100%;
          height: 80%;

          .card_left {
            width: 40%;
            height: 130px;
            position: relative;

            .el-image {
              width: 130px;
              height: 130px;
              border-radius: 26px;
            }

            p {
              width: 130px;
              height: 20px;
              background: rgba(21, 21, 21, 0.5);
              position: absolute;
              bottom: 0;
              left: 0;
              margin: 0;
              text-align: center;
              border-bottom-left-radius: 26px;
              border-bottom-right-radius: 26px;
              font-family: AlibabaPuHuiTi;
              font-size: 12px;
              font-weight: normal;
              line-height: 20px;
            }
          }

          .comparison_card_left {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;

            .snap-image-box {
              display: flex;
              position: relative;
              margin-bottom: 30px;

              .img-right,
              .img-left {
                width: 100px;
                height: 80px;
              }

              .img-right {
                margin-left: 0px;
              }

              .radio-view {
                position: absolute;
                left: calc(50% - 45px);
                bottom: 0px;
                width: 80px;
                height: 28px;
                line-height: 28px;
                border-radius: 6px;
                background: #008000;
                font-size: 16px;
                text-align: center;
              }
            }
          }

          .card_right {
            width: 60%;
            position: relative;

            .particulars {
              position: absolute;
              top: 0;
              right: 5px;
              display: flex;
              align-items: center;
              font-size: 12px;

              img {
                width: 10px;
                height: 14px;
                margin-right: 5px;
              }
            }

            h3 {
              margin: 5px;
              font-size: 16px;
              font-family: AlibabaPuHuiTi;
              font-size: 20px;
              font-weight: bold;
              line-height: 24px;
              color: #FF0101;
            }

            h4 {
              margin: 5px;
              font-family: AlibabaPuHuiTi;
              font-size: 12px;
              font-weight: bold;
              line-height: 22px;
              color: #FFFFFF;
              width: 13em;
              white-space: nowrap;
              // overflow: hidden;
              // text-overflow: ellipsis;

            }

            p {
              font-size: 12px;
              margin: 5px;
              color: #ccc;
            }
          }
        }

        .box-card_bottom {
          box-sizing: border-box;
          padding: 0px 5px 0px 5px;
          border-top: 1.5px solid #ccc;
          height: 30px;
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: normal;
          line-height: 20px;
          letter-spacing: 0px;
          color: #ffffff;
          z-index: 2;

          .el-button {
            font-family: PingFang SC;
            color: #ffffff !important;

            span {
              i {
                padding-right: 10px;
              }
            }
          }
        }
      }
    }
  }

}

::v-deep {
  .el-date-picker {
    background: #1F2935;
  }

  .el-button {
    height: 35px;
  }

  .search_bar {
    .el-input__inner {
      background: #1F2935;
      border: none;
      height: 35px;
      border-radius: 0 6px 6px 0;
    }

  }

  .el-range-input {
    background: #1F2935;
  }

  // .el-picker-panel__body{
  //   background: #1F2935 !important;
  // }
  // .el-picker-panel__content{
  //   background: #1F2935 !important;
  // }
  .el-card {
    background-color: #1c2a42;
    color: #fff;
    width: 382px;
    box-sizing: border-box;
    display: flex;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    height: 156px;
    border: 3px solid transparent;
    box-shadow: inset 0px 1px 15px 0px rgba(3, 251, 255, 0.6);
    cursor: pointer;

    .box-card_border {
      width: 100%;
      height: 100%;
      border-radius: 10px;

      .box-card_top {
        width: 100%;
        height: 100%;

        .card_left {
          width: 40%;

          .el-image {
            width: 100px;
            height: 100px;
          }
        }

        .comparison_card_left {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;

          .snap-image-box {
            display: flex;
            position: relative;
            margin-bottom: 30px;

            .img-right,
            .img-left {
              width: 100px;
              height: 80px;
            }

            .img-right {
              margin-left: 0px;
            }

            .radio-view {
              position: absolute;
              left: calc(50% - 45px);
              bottom: 0px;
              width: 80px;
              height: 28px;
              line-height: 28px;
              border-radius: 6px;
              background: #008000;
              font-size: 16px;
              text-align: center;
            }
          }
        }

        .card_right {
          width: 60%;

          h3 {
            margin: 5px;
            font-size: 16px;
          }

          h4 {
            margin: 5px;
            font-size: 14px;
          }

          p {
            font-size: 12px;
            margin: 5px;
            color: #ccc;
          }
        }
      }

      .box-card_bottom {
        box-sizing: border-box;
        padding: 0px 5px 0px 5px;
        border-top: 1.5px solid #ccc;
        height: 30px;
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0px;
        color: #ffffff;
        z-index: 2;

        .el-button {
          font-family: PingFang SC;
          color: #ffffff !important;

          span {
            i {
              padding-right: 10px;
            }
          }
        }
      }
    }
  }

  .el-card:hover {
    border: 3px solid #33fefe;
    box-shadow: inset 0px 1px 15px 0px rgba(3, 251, 255, 0.6);
  }

  .el-card__body {
    width: 100%;
    padding: 10px 10px 0px 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;

    .box-card_top {
      width: 100%;
      display: flex;

      .card_left {
        width: 45%;
      }

      .comparison_card_left {
        width: 60%;
      }

      .card_right {
        width: 55%;
      }
    }

    .box-card_bottom {
      width: 100%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
}

.btn-pager {
  width: calc(100% - 40px);
  justify-content: left;
  position: relative;
}</style>
